// 实现这个项目的构建任务
const { src, dest, parallel, series, watch } = require('gulp') //引入Gulp所用API  parallel 同时执行任务
const del = require('del')
const browserSync = require('browser-sync')
const loadPlugins = require('gulp-load-plugins') //自动化加载插件 gulp-load-plugins
const plugins = loadPlugins()
const bs = browserSync.create()
const sass = require('gulp-sass')(require('sass'))
    //     //运行的时候出现问题 我按照gulp-sass 依赖的包是node-sass，因为 node-sass已经弃用，所以就报错了。 
    //     //解决办法 npm install sass gulp-sass --save-dev
    // const babel = require('gulp-babel') // npm install gulp-babel --dev  
    //     // 再安装别的 @babel/core  @babel/preset-env --dev 转换
    // const swig = require('gulp-swig')
    // const imagemin = require('gulp-imagemin') // 图片压缩 8.0版本有点小问题 安装指定的6.1版本
const clean = () => {
    return del(['dist', 'temp']) //temp 临时目录
}
const data = {
    menus: [{
        name: 'Fxl',
        link: 'index.html',
    }],
    pkg: require('./package.json'),
    date: new Date(),
}
const style = () => {
    return src('src/assets/styles/*.scss', { base: 'src' }) //base 表示会输出src目录下的基准路径
        .pipe(sass({ outputStyle: 'expanded' })) //outputStyle 样式花括号展开形式  
        //？？？plugins.sass 不知道为啥报错???
        .pipe(dest('temp'))
        .pipe(bs.reload({ stream: true }))
}
const scripts = () => {
    return src('src/assets/scripts/*.js', { base: 'src' })
        .pipe(plugins.babel({ presets: ['@babel/preset-env'] })) //@babel/preset-env 最新特性整体的打包
        .pipe(dest('temp'))
        .pipe(bs.reload({ stream: true }))
}
const page = () => {
    return src('src/*.html', { base: 'src' })
        .pipe(plugins.swig({ data, cache: false })) //cache: false  清除页面缓存
        .pipe(dest('temp'))
        .pipe(bs.reload({ stream: true }))
}
const image = () => {
    return src('src/assets/images/**', { base: 'src' })
        .pipe(plugins.imagemin())
        .pipe(dest('dist'))
}
const fonts = () => {
    return src('src/assets/fonts/**', { base: 'src' })
        .pipe(plugins.imagemin())
        .pipe(dest('dist'))
}
const extra = () => {
    return src('public/**', { base: 'public' })
        .pipe(dest('dist'))
}
const serve = () => {
    watch('src/assets/styles/*.scss', style)
    watch('src/assets/scripts/*.js', scripts)
    watch('src/*.html', page)
        // watch('src/assets/images/**', image)
        // watch('src/assets/fonts/**', fonts)
        // watch('public/**', extra)   //开发阶段不用每次都编译 上线编译就行
    watch([
        'src/assets/images/**',
        'src/assets/fonts/**',
        'public/**'
    ], bs.reload)
    bs.init({
        notify: false,
        port: 2022, // 自定义端口号
        // files: 'dist/**',
        server: {
            baseDir: ['temp', 'src', 'public'], //目录依次查找
            routes: {
                '/node_modules': 'node_modules'
            }
        }
    })
}
const useref = () => {
    return src('temp/*.html', { base: 'temp' })
        .pipe(plugins.useref({ searchPath: ['temp', '.'] }))
        .pipe(plugins.if(/\.js$/, plugins.uglify()))
        .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
        .pipe(plugins.if(/\.html$/, plugins.htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true, })))
        // collapseWhitespace: true, minifyCSS: true, minifyJS: true  顺序正确 不然报错
        .pipe(dest('dist'))
}
const compile = parallel(style, scripts, page) //compile 主要转换src 目录下的文件
const build = series(clean, parallel(series(compile, useref), image, fonts, extra)) //上线前 执行
const develop = series(compile, serve)
module.exports = {
    clean,
    build,
    develop
}